<template>
	<transition name="move">
		<div v-show="showFlag" class="food">
			<div class="food-content">
				<div class="image-header">
					<img :src="food.image">
					<i @click="hide"></i>
				</div>
				<div class="content">
					<h1 class="title">{{food.name}}</h1>
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span>
						<span class="rating">好评率{{food.rating}}</span>
					</div>
					<div class="price">
						<span class="now">￥{{food.price}}</span>
						<span class="old" v-show="food.oldPrice">{{food.oldPrice}}%</span>
					</div>
				
					<div class="cartcontrol-wrapper">
						<cart-control :food="food"></cart-control>
					</div>
					<div @click.stop.prevent="addFirst" class="buy" v-show="!food.count || food.count===0">加入购物车</div>

				</div>
				<my-split v-show="food.info"></my-split>
				<div class="info" v-show="food.info">
					<h1 class="title">商品信息</h1>
					<p class="text">{{food.info}}</p>
				</div>
				<my-split v-show="food.info"></my-split>
				<div class="rating">
					<h1 class="title">商品评价</h1>
					<rating-select :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"></rating-select>

				</div>
			</div>
		</div>
	</transition>
	
</template>


<script type="text/javascript">

import Vue from 'vue'
import BScroll from 'better-scroll'
import cartControl from '../cartcontrol/cartcontrol'  // 商品加减按钮组件
import mySplit from '../split/split'  // 分割样式组件
import ratingSelect from '../ratingselect/ratingselect'  // 评价组件

const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2

export default{
	props: ['food'],
	data(){
		return{
			showFlag: false,
			selectType: ALL,
			onlyContent: true,
			desc: {
				all: '全部',
				positive: '推荐',
				negative: '吐槽'
			}
		}
	},
	methods: {
		show(){
			this.showFlag = true
			this.selectType = ALL
			this.onlyContent = true

			this.$nextTick(() => {
				if(!this.scroll2){
					this.scroll2 = new BScroll('.food', {
						click: true
					})
				}else{
					this.scroll2.refresh()
				}
			})
		},
		hide(){
			this.showFlag = false
		},
		addFirst(event){
			if( !event._constructed ){
				return     // 判断是原生的click事件还是BScroll派发的click事件，如果是原生的事件就执行返回 不然click在pc端会重复
			}
			Vue.set(this.food, 'count', 1)



		}
	},
	components: {
		cartControl, mySplit, ratingSelect
	}
}

</script>



<style lang="stylus" rel="stylesheet/stylus">
.food
	position: fixed
	left 0px
	top 0px
	bottom 48px
	z-index 30
	width 100%
	background #fff
	&.move-enter-active,&.move-leave-active
		transition all 0.2s linear
		transform translate3d(0,0,0)
	&.move-enter,&.move-leave
		transform translate3d(100%,0,0)
	.image-header
		position relative
		width 100%
		height 0
		padding-top 100%
		img
			position absolute
			top 0
			left 0
			width 100%
			height 100%
		i
			display inline-block
			width 30px
			height 30px
			background url('./fh.png') 
			position absolute
			left 10px
			top 10px
			opacity .6
	.content
		position relative
		padding 18px
		.title 
			line-height 14px
			margin-bottom 8px
			font-size 14px
			font-weight 700px
			color rgb(7,17,27)
		.detail
			margin-bottom 18px
			line-height 10px
			height 10px
			font-size 0
			.sell-count,.rating
				font-size 10px
				color rgb(147,153,159)
			.sell-count
				margin-right 12px
		.price
			font-weight 700
			line-height 24px
			.now
				margin-right 8px
				font-size 14px
				color rgb(240,20,20)
			.old
				text-decoration line-through
				font-size 10px
				color rgb(147,153,159)
		.cartcontrol-wrapper
			position absolute
			right 12px
			bottom 12px
		.buy
			position absolute
			right 12px
			bottom 13px
			z-index 10
			height 24px
			line-height 24px
			padding 0 12px
			box-sizing border-box
			font-size 10px
			border-radius 12px
			color #fff
			background rgb(0,160,220)
	.info
		padding 18px
		.title
			line-height 14px
			margin-bottom 6px
			font-size 14px
			color rgb(7, 17, 27)
		.text
			line-height 24px
			padding 0 8px
			font-size 12px
			color rgb(77, 85, 93)
	.rating
		padding-top 18px
		.title
			line-height 14px
			margin-left 18px
			font-size 14px
			color rgb(7, 17, 27)			
		
		

</style>